import { memo, Fragment, Suspense } from 'react'
import type { FC, ReactNode } from 'react'
import { Layout, Divider } from '@arco-design/web-react'
import Header from './header.tsx'
import { Menu, AppPlayer } from '@/components/web-react'
import { Outlet } from 'react-router'
import { RoumMenuList } from '@/consts/system.ts'
import Loading from '@/pages/system/loading/change-page.tsx'
import PlayList from './play-list.tsx'

interface IProps {
  children?: ReactNode
}

const Ruom: FC<IProps> = () => {
  return (
    <Fragment>
      <Layout
        className={
          'w-full h-screen bg-base-plate custom-scrollbar overflow-hidden'
        }
      >
        <Layout.Header className={'w-full h-[64px]'}>
          <Header></Header>
        </Layout.Header>
        <Layout className={'w-full h-[50px] box-border'}>
          <Layout.Sider className={'w-full h-full custom-scrollbar'}>
            <div
              className={
                'w-full h-full box-border px-4 pt-2 pb-[64px] custom-scrollbar overflow-hidden hover:overflow-y-auto'
              }
            >
              <Menu menuList={RoumMenuList as any}></Menu>
              <Divider style={{ margin: '6px 0' }}></Divider>
              <Menu menuList={
                  [
                    {
                      key: 'like',
                      label: '我的喜欢',
                      icon: 'like',
                      path: '/ruom/user-like'
                    },
                    {
                      key: 'history',
                      label: '最近播放',
                      icon: 'history',
                      path: '/ruom/user-timer'
                    }
                  ]
                }
              ></Menu>
              <PlayList></PlayList>
            </div>
          </Layout.Sider>
          <Layout.Content className={'py-4 pr-1 w-full h-full'}>
            <div
              id="custom_back_top"
              className={
                'overflow-hidden  hover:overflow-y-auto h-full custom-scrollbar px-4 pb-[64px] bg-white/10 backdrop-blur'
              }
            >
              <Suspense fallback={<Loading></Loading>}>
                <Outlet />
              </Suspense>
            </div>
          </Layout.Content>
        </Layout>
        <AppPlayer></AppPlayer>
      </Layout>
    </Fragment>
  )
}
export default memo(Ruom)
